/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import { Navigator } from 'react-native-deprecated-custom-components'
import {
  AppRegistry,
  StyleSheet,
  TabBarIOS,
  View,
  AsyncStorage,
  Dimensions,
  ActivityIndicator
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height


let List = require('./app/creation/index')
let Edit = require('./app/edit/index')
let Account = require('./app/account/index')
let Login = require('./app/account/login')
let Swiper = require('./app/account/swiper')

class GougouApp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'list',
      user: null,
      entered: false,
      logined: false,
      booted: false
    }
  }

  componentDidMount() {
    // AsyncStorage.removeItem('entered') // 测试欢迎页面轮播图
    this._asyncAppStatus()
  }

  _asyncAppStatus() {
    AsyncStorage.multiGet(['user', 'entered'])
      .then(data => {
        let userData = data[0][1]
        let entered = data[1][1]

        let user, newState = {
          booted: true
        }

        if (userData) {
          user = JSON.parse(userData)
        }

        if (user && user.accessToken) {
          newState.user = user
          newState.logined = true
        } else {
          newState.logined = false
        }

        if (entered === 'yes') {
          newState.entered = true
        }

        this.setState(newState)
      })
  }

  _afterLogin(user) {
    user = JSON.stringify(user)
    AsyncStorage.setItem('user', user)
      .then(() => {
        this.setState({
          logined: true,
          user: user
        })
      })
  }

  _logout() {
    AsyncStorage.removeItem('user')
    this.setState({
      logined: false,
      user: null
    })
  }

  _enterSlide() {
    this.setState({
      entered: true
    }, () => {
      AsyncStorage.setItem('entered', 'yes')
    })
  }

  render() {
    if (!this.state.booted) {
      return (
        <View style={styles.bootPage}>
          <ActivityIndicator color={'#ee753c'} />
        </View>
      )
    }

    if (!this.state.entered) {
      return <Swiper enterSlide={this._enterSlide.bind(this)} />
    }

    if (!this.state.logined) {
      return <Login afterLogin={this._afterLogin.bind(this)} />
    }

    return (
      <TabBarIOS tintColor="#ee735c">

        <Icon.TabBarItem
          iconName='ios-videocam'
          selectedIconName='ios-videocam'
          selected={this.state.selectedTab === 'list'}
          onPress={() => {
            this.setState({
              selectedTab: 'list'
            })
          }}>
          <Navigator
            initialRoute={{
              name: 'list',
              component: List
            }}
            configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
            renderScene={(route, navigator) => {
              let Component = route.component

              return <Component {...route.params} navigator={navigator} />
            }} />
        </Icon.TabBarItem>

        <Icon.TabBarItem
          iconName='ios-recording'
          selectedIconName='ios-recording'
          selected={this.state.selectedTab === 'edit'}
          badge={5}
          onPress={() => {
            this.setState({
              selectedTab: 'edit'
            })
          }}>
          <Edit />
        </Icon.TabBarItem>

        <Icon.TabBarItem
          iconName='ios-more'
          selectedIconName='ios-more'
          selected={this.state.selectedTab === 'login'}
          renderAsOriginal
          onPress={() => {
            this.setState({
              selectedTab: 'login'
            })
          }}>
          <Account user={this.state.user} logout={this._logout.bind(this)} />
        </Icon.TabBarItem>

      </TabBarIOS>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff'
  },

  bootPage: {
    width: width,
    height: height,
    backgroundColor: '#fff',
    justifyContent: 'center'
  }
})

AppRegistry.registerComponent('GougouApp', () => GougouApp)
